<!--
*@Author: QWP
*@Description: 出差统计
*@Date 2024-09-10 18:24
-->
<template>
  <a-layout class="f-h-100">
    <u-table-header style="height: calc(40% - 8px); background: unset; padding: 0">
      <a-row class="f-h-100" :gutter="16">
        <a-col :span="12">
          <u-busi-card :title="dayjs(deptDate).format('M月') + '出差人数'" class="f-h-100">
            <template #extra>
              <DateChange v-model:value="deptDate" :allowClear="false"
                mode="month"
                picker="month"
                format="YYYY年MM月"
                valueFormat="YYYY-MM"
                @change="getAnalazyData()">
              </DateChange>
            </template>
            <BarChart :option="monthTravelData"/>
          </u-busi-card>
        </a-col>
        <a-col :span="12">
          <u-busi-card :title="dayjs(deptDate).format('M月') + '各部门出差人数'" class="f-h-100">
            <BarChart :option="deptTravelData"/>
          </u-busi-card>
        </a-col>
      </a-row>
    </u-table-header>
    <a-layout style="height: calc(60% - 8px)" class="f-margin-t16">
      <TravelPage :isReport="true"/>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { numberC, alertC, messageC } from '@/util/common'
import { useBaseStore } from '@/store'
import { groupBy1 } from '@/util/format.ts'
import dayjs from "dayjs";
import { cloneDeep } from 'lodash'
import { eachCreateDataByDate, calcGroup } from '@/views/oa/report/util/tool'
import * as travelApi from '@/service/administration/travel'
import BarChart from '@/views/oa/report/components/BarChart.vue'
import DateChange from '@/views/oa/report/components/DateChange.vue'
import TravelPage from '@/views/oa/administration/travel/Index.vue'

const baseStore = useBaseStore()
const route = useRoute();
const router = useRouter();

onMounted(() => {
  getAnalazyData(1)
})

const loading = ref<boolean>(false)
const monthTravelData = ref<any[]>()
const deptTravelData = ref<any[]>()
const deptDate = ref<string>(dayjs().format('YYYY-MM'))
const getAnalazyData = async (type?: number) => {

  loading.value = true;
  try {
    const res = await travelApi.travelNumByMon({ datetime: deptDate.value })
    if(res.code == 0) {
      
      createMonthData(res.data['searchMonNumber'] || [])

      createDeptData(res.data['searchDeptNumber'])
    }
  } catch (error) {}
  loading.value = false;  
}

// 当月出差人数
const createMonthData = (data: objetct) => {
  const dayData = eachCreateDataByDate(data, { key: 'startdate', key1: 'enddate' })
  dayData.forEach(i => i.startdate = dayjs(i.startdate).format('YYYY-MM-DD'))
  const dayGroup = groupBy1(dayData, 'startdate', false)

  let keys = Object.keys(dayGroup).sort((a, b) => dayjs(a) - dayjs(b))
  let xData = [], sData = [];
  keys.forEach(k => {
    xData.push(dayjs(k).format('M-D'))
    sData.push(dayGroup[k].length)
  })
  monthTravelData.value = {
    xAxis: [
      {
        type: 'category',
        data: xData,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: {
      minInterval: 1
    },
    series: [
      {
        name: '出差人数',
        type: 'bar',
        barWidth: '60%',
        barMaxWidth: 60,
        data: sData
      }
    ]
  }
}

// 部门出差人数
const createDeptData = (data: any[]) => {
  data.forEach(i => {
    if(!i['fkdeptname']) {
      i['fkdeptname'] = '其他'
    }
  })
  const deptGroup = groupBy1(data, 'fkdeptname', false)

  let keys = Object.keys(deptGroup)
  let sData = [];
  keys.forEach(k => {
    sData.push(deptGroup[k].length)
  })

  deptTravelData.value = {
    xAxis: [
      {
        type: 'category',
        // data: baseStore.deptData.map(i => i.name),
        data: keys,
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          rotate: keys.length > 10 ? 45 : 25,
          width: 66,
          overflow: 'truncate' 
        }
      }
    ],
    yAxis: {
      minInterval: 1
    },
    series: [
      {
        name: '出差人数',
        type: 'bar',
        barWidth: '60%',
        barMaxWidth: 120,
        data: sData,
        // data: baseStore.deptData.map(i => 2),
      }
    ]
  }
}
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
